<template>
  <div>
    <after-project
      :related-id="relatedId"
      @success="handleChangeStatus"
      ref="afterProject"
    ></after-project>

    <div class="card mt-3" style="min-height: 65vh">
      <el-tabs>
        <el-tab-pane class="p-3">
          <div slot="label" class="after-tab-title">
            <i class="el-icon-video-camera"></i>
            远程监控
          </div>
          <div class="mb-4">
            <h4 class="device-title">生物资产监管</h4>
            <after-rfid :farm-id="farmId" :related-id="relatedId"></after-rfid>
          </div>
          <h4 class="device-title">远程查看</h4>
          <div class="card mb-4">
            <div class="card-body">
              <h5 class="device-subtitle">在线视频</h5>
              <after-video :farm-id="farmId" :related-id="relatedId"></after-video>
              <h5 class="device-subtitle mt-3">图片资料</h5>
              <after-capture :farm-id="farmId" :related-id="relatedId"></after-capture>
            </div>
          </div>
          <div>
            <h4 class="device-title">电表查询</h4>
            <after-ele :farm-id="farmId"></after-ele>
          </div>
        </el-tab-pane>
        <el-tab-pane class="p-3">
          <div slot="label" class="after-tab-title">
            <i class="el-icon-folder-checked"></i>
            检查记录
          </div>
          <after-register :related-id="relatedId" ref="afterRegister"></after-register>
        </el-tab-pane>
        <el-tab-pane class="p-3">
          <div slot="label" class="after-tab-title">
            <i class="el-icon-c-scale-to-original"></i>
            还款跟踪
          </div>
          <after-repay :query-id="relatedId" @success="handleRepaySuccess"></after-repay>
        </el-tab-pane>
        <el-tab-pane class="p-3">
          <div slot="label" class="after-tab-title">
            <i class="el-icon-chat-line-square"></i>
            检查报告
          </div>
          <after-check-report :query-id="relatedId"></after-check-report>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import AfterProject from '@/credit/views/city/self/after/AfterProject'
import AfterRegister from '@/credit/views/city/self/after/AfterRegister'
import AfterRepay from '@/credit/views/city/self/after/repay/Index'
import AfterEle from '@/credit/views/city/self/after/AfterEle'
import AfterRfid from '@/credit/views/city/self/after/rfid/DeviceList'
import AfterVideo from '@/credit/views/city/self/after/video/VideoList'
import AfterCapture from '@/credit/views/city/self/after/capture/CaptureList'
import AfterCheckReport from '@/credit/views/city/self/after/report/Index'
export default {
  components: {
    AfterProject,
    AfterRegister,
    AfterRepay,
    AfterEle,
    AfterVideo,
    AfterRfid,
    AfterCapture,
    AfterCheckReport,
  },
  props: {},
  data() {
    return {
      relatedId: '',
      farmId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.relatedId = this.$route.query.id
    this.farmId = this.$route.query.farmid
  },
  mounted() {},
  methods: {
    handleChangeStatus() {
      const ref = this.$refs.afterRegister
      if (ref && ref.getData) {
        ref.getData()
      }
    },
    handleRepaySuccess() {
      const ref = this.$refs.afterProject
      if (ref && ref.getData) {
        ref.getData()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.after-tab-title {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0 1rem;
}
.device-title {
  font-size: 1.1rem;
  font-weight: bold;
}
.device-subtitle {
  font-size: 1.05rem;
  font-weight: bold;
}
</style>
